// 导入组合式API
// useIntersectionObserver 检测DOM元素是否在可视区域
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useWatchDOM = (apiFN) => {
// target监视的目标DOM元素，既可以是ref对象也是原生DOM
  const target = ref(null)
  // 调用useIntersectionObserver方法监视DOM元素是否出现在可视区
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // isIntersecting: 布尔值，表示监视的DOM元素是否出现在可视区，是true,否则false
      // 当DOM出现在可视区时，才发起获取DOM的请求
      if (isIntersecting) {
        // 调用传入的方法，获取对应数据
        apiFN()
        // 结束监听
        stop()
      }
    }
  )
  // 返回监听的DOM元素
  return target
}
